<template>
  <div style="width:100%">
    <template>
      <a-comment>
        <!--第一次渲染的时候是一级评论  递归的时候是父级评论-->
        <template slot="actions">
          <span key="comment-basic-like">
            <a-tooltip title="Like">
              <a-icon type="like" :class="activeCommentGoods===replycomments.id?'info-like goodsActive':'info-like'" @click="commentGood(replycomments.id)" />
            </a-tooltip>
            <span style="padding-left: '8px';cursor: 'auto'">
              {{ replycomments.commentGood }}
            </span>
          </span>
          <span key="comment-basic-reply-to" @click="replyClick(0)">回复</span>
          <span slot="actions" style="padding-left:20px;" @click="lookReply(replycomments.childrenCount,replycomments.id)">查看{{ replycomments.childrenCount }}条回复<a-icon :type="replySpand?'down':'up'" style="font-size: 14px" /></span>
        </template>
        <a slot="author">{{ replycomments.user.nickname }}</a>
        <a-avatar
          slot="avatar"
          :src="replycomments.user.header"
          :alt="replycomments.user.nickname"
        />
        <p slot="content">
          {{ replycomments.commentContent }}
        </p>
        <a-tooltip slot="datetime" :title="replycomments.createdTime">
          <span>{{ moment(replycomments.createdTime).fromNow() }}</span>
        </a-tooltip>
        <!--父级回复评论-->
        <a-comment v-if="parentReplyVisible">
          <a-avatar
            slot="avatar"
            :src="replycomments.user.header"
            :alt="replycomments.user.nickname"
          />
          <div slot="content">
            <a-form-item>
              <a-textarea :rows="4" :value="value" @change="handleChange" />
            </a-form-item>
            <a-form-item>
              <a-button html-type="submit" :loading="submitting" type="primary" @click="handleSubmit">
                提交评论
              </a-button>
            </a-form-item>
          </div>
        </a-comment>
        <!--子集评论-->
        <a-comment v-for="(childrenItem,childIndex) in secondReply" :key="childIndex">
          <template slot="actions">
            <span key="comment-basic-like">
              <a-tooltip title="Like">
                <a-icon type="like" :class="activeCommentGoods===childrenItem.id?'info-like goodsActive':'info-like'" @click="commentGood(childrenItem.id)" />
              </a-tooltip>
              <span style="padding-left: '8px';cursor: 'auto'">
                {{ childrenItem.commentGood }}
              </span>
            </span>
            <span key="comment-basic-reply-to" @click="replyClick(1)">回复</span>
            <span slot="actions" style="padding-left:20px;" @click="lookReply(childrenItem.childrenCount,childrenItem.id)">查看{{ childrenItem.childrenCount }}条回复<a-icon type="down" style="font-size: 14px" /></span>
          </template>
          <a slot="author">{{ childrenItem.user.nickname }}</a>
          <a-avatar
            slot="avatar"
            :src="childrenItem.user.header"
            :alt="childrenItem.user.nickname"
          />
          <p slot="content">
            {{ childrenItem.commentContent }}
          </p>
          <a-tooltip slot="datetime" :title="childrenItem.createdTime">4
            <span>{{ moment(childrenItem.createdTime).fromNow() }}</span>
          </a-tooltip>
          <!--子集回复评论-->
          <a-comment v-if="childReplyVisible">
            <a-avatar
              slot="avatar"
              :src="replycomments.user.header"
              :alt="replycomments.user.nickname"
            />
            <div slot="content">
              <a-form-item>
                <a-textarea :rows="4" :value="value" @change="handleChange" />
              </a-form-item>
              <a-form-item>
                <a-button html-type="submit" :loading="submitting" type="primary" @click="handleSubmit">
                  提交评论
                </a-button>
              </a-form-item>
            </div>
          </a-comment>
          <reply-comment v-for="(grandChildItem,grandChildItemIndex) in childrenItem.children" :key="grandChildItemIndex" :replycomments="grandChildItem" />
        </a-comment>
      </a-comment>
    </template>
  </div>
</template>

<script>
import commentApi from '@/api/comment'
import moment from 'moment'
export default {
  name: 'ReplyComment',
  props: {
    replycomments: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      activeCommentGoods: '',
      moment,
      // 输入的值
      value: '',
      parentReplyVisible: false,
      childReplyVisible: false,
      submitting: false,
      // 回复评论的长度不能超过300
      replyLength: 300,
      // 评论的回复
      secondReply: [],
      // 评论展开
      replySpand: false
    }
  },
  watch: {
    'value': function(newVal, oldVal) {
      if (newVal) {
        if (this.value.length > 300) {
          this.value = this.value.substring(0, 300)
        }
        if (newVal - oldVal > 0) {
          this.replyLength = this.value.length - (newVal.length - oldVal.length)
        } else if (newVal - oldVal < 0) {
          this.replyLength = this.value.length + (oldVal.length - newVal.length)
        }
      }
    }
  },
  methods: {
    lookReply(count, id) {
      if (count !== 0) {
        this.replySpand = !this.replySpand
        if (this.replySpand === true) {
          commentApi.getReplyByParentId(id).then(res => {
            if (res.code === 200) {
              this.secondReply = res.data
            }
          })
        } else {
          this.secondReply = []
        }
      }
    },
    // 点击回复
    replyClick(id) {
      var elementById = document.getElementById('reply-comment')
      elementById.scrollIntoView()
      /* if (id === 0) {
        this.parentReplyVisible = true
        this.childReplyVisible = false
      } else if (id === 1) {
        this.parentReplyVisible = false
        this.childReplyVisible = true
      }*/
    },
    handleSubmit() {
      if (!this.value) {
        return
      }
      const formData = new FormData()
      formData.append('pid', this.replycomments.id)
      formData.append('content', this.value)
      commentApi.reply(formData).then(res => {
        if (res.code === 200) {
          this.$message.success('评论成功')
          this.replycomments.children.push(res.data)
          console.log('replycomments-afa', this.replycomments)
        }
      })
      this.replyVisible = false
    },
    handleChange(e) {
      this.value = e.target.value
    },
    // 评论点赞
    commentGood(commentId) {
      commentApi.commentGoods({ commentId: commentId }).then(res => {
        if (res.code === 200) {
          this.getCommentByBlogId(this.$route.params.id)
          this.activeCommentGoods = commentId
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
</style>
